<script setup></script>

<template>
  <div class="chuxin">
    <!-- 服务列表 -->
    <div class="server-list">
      <div class="server-item">
        <div class="title">休息室服务</div>
        <div class="sub-title">预约/改期/取消</div>
        <div class="bottom">
          <button class="btn">查看详情</button>
          <img src="@/static/icons/cafei.png" alt="" />
        </div>
      </div>
      <div class="server-item">
        <div class="title">机场贵宾服务</div>
        <div class="sub-title">预约/改期/取消</div>
        <div class="bottom">
          <button class="btn">查看详情</button>
          <img src="@/static/icons/cafei.png" alt="" />
        </div>
      </div>
      <div class="server-item">
        <div class="title">礼宾车接送服务</div>
        <div class="sub-title">预约/改期/取消</div>
        <div class="bottom">
          <button class="btn">查看详情</button>
          <img src="@/static/icons/cafei.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.server-list {
  margin-top: 30rpx;
  display: flex;
  flex-direction: column;
  gap: 17rpx;
  .server-item {
    display: flex;
    flex-direction: column;
    padding: 30rpx;
    width: 690rpx;
    height: 256rpx;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    .title {
      font-size: 34rpx;
    }
    .sub-title {
      font-size: 25rpx;
    }
    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: auto;
      button {
        width: 117rpx;
        height: 45rpx;
        line-height: 45rpx;
        font-size: 19rpx;
        color: #fff;
        padding: 0rpx;
        margin: 0rpx;
        text-align: center;
        border: none;
        border-radius: 33rpx 33rpx 33rpx 33rpx;
      }
      img {
        width: 96rpx;
        height: 96rpx;
      }
    }
  }
  .server-item:nth-child(1) {
    background: linear-gradient(247deg, #e5dfaa 0%, #f2e049 100%);
    box-shadow: 2rpx 3rpx 35rpx 1rpx rgba(226, 146, 148, 0.29);
    .title {
      color: #e89c46;
    }
    .sub-title {
      color: #d9a569;
    }
    .bottom {
      button {
        background: linear-gradient(270deg, #ee9551 0%, #efd9ca 100%);
      }
    }
  }
  .server-item:nth-child(2) {
    background: linear-gradient(270deg, #61a0fc 0%, #daddfc 100%);
    box-shadow: 2rpx 3rpx 35rpx 1rpx rgba(226, 146, 148, 0.29);
    .title {
      color: #3484fc;
    }
    .sub-title {
      color: #63aee8;
    }
    .bottom {
      button {
        background: linear-gradient(270deg, #61a0fc 0%, #c3c8fb 100%);
      }
    }
  }
  .server-item:nth-child(3) {
    background: linear-gradient(270deg, #ee5c96 0%, #fcf8ff 100%);
    box-shadow: 2rpx 3rpx 35rpx 1rpx rgba(226, 146, 148, 0.29);
    .title {
      color: #ef5c97;
    }
    .sub-title {
      color: #f66a95;
    }
    .bottom {
      button {
        background: linear-gradient(270deg, #e5719f 0%, #f3c9db 100%);
      }
    }
  }
}

.chuxin {
  padding: 0 $base-spacing-h-30;
}
</style>
